<!-- eslint-disable vue/require-v-for-key -->
<template>
    <div>
        <el-dialog v-model="dialogFormVisible" width="1020" height="100" style="background-color: #383838;">
            <template #header>
                <h4>AI口袋百宝箱</h4>
            </template>
            <div class="box">
                <el-tabs v-model="activeName" style="color: white;">
                    <el-tab-pane name="first">
                        <template #label>
                            <span style="color: white;">画风</span>
                        </template>
                        <el-divider content-position="left"><span class="subtitle">画风</span></el-divider>
                        <img src="../../../img/ai口袋/画风.png" width="600px" />
                    </el-tab-pane>
                    <el-tab-pane>
                        <template #label>
                            <span style="color: white;">风格</span>
                        </template>
                        <el-divider content-position="left"><span class="subtitle">风格</span></el-divider>
                        <div class="itembox">
                            <div v-for="item in styles" class="item">
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="plus"
                                    @click="pulstext(item)"> +</el-button>
                                <div :class="['text', chooseList.some(i => i.item === item) ? 'active' : '']"
                                    @click="addtext(item)">
                                    {{ item }}</div>
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="sub"
                                    @click="subtext(item)"> -</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="灯光"><template #label>
                            <span style="color: white;">灯光</span>
                        </template>
                        <el-divider content-position="left"><span class="subtitle">灯光</span></el-divider>
                        <div class="itembox">
                            <div v-for="item in light" class="item">
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="plus"
                                    @click="pulstext(item)"> +</el-button>
                                <div :class="['text', chooseList.some(i => i.item === item) ? 'active' : '']"
                                    @click="addtext(item)">
                                    {{ item }}</div>
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="sub"
                                    @click="subtext(item)"> -</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="场景"><template #label>
                            <span style="color: white;">场景</span>
                        </template>
                        <el-divider content-position="left"><span class="subtitle">户外场景</span></el-divider>
                        <div class="itembox">
                            <div v-for="item in outside" class="item">
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="plus"
                                    @click="pulstext(item)"> +</el-button>
                                <div :class="['text', chooseList.some(i => i.item === item) ? 'active' : '']"
                                    @click="addtext(item)">
                                    {{ item }}</div>
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="sub"
                                    @click="subtext(item)"> -</el-button>
                            </div>
                        </div>
                        <el-divider content-position="left"><span class="subtitle">背景场景</span></el-divider>
                        <div class="itembox">
                            <div v-for="item in backg" class="item">
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="plus"
                                    @click="pulstext(item)"> +</el-button>
                                <div :class="['text', chooseList.some(i => i.item === item) ? 'active' : '']"
                                    @click="addtext(item)">
                                    {{ item }}</div>
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="sub"
                                    @click="subtext(item)"> -</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="建筑"><template #label>
                            <span style="color: white;">建筑</span>
                        </template>
                        <el-divider content-position="left"><span class="subtitle">建筑</span></el-divider>
                        <div class="itembox">
                            <div v-for="item in building" class="item">
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="plus"
                                    @click="pulstext(item)"> +</el-button>
                                <div :class="['text', chooseList.some(i => i.item === item) ? 'active' : '']"
                                    @click="addtext(item)">
                                    {{ item }}</div>
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="sub"
                                    @click="subtext(item)"> -</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="人物"><template #label>
                            <span style="color: white;">人物</span>
                        </template>
                        <el-divider content-position="left"><span class="subtitle">人物</span></el-divider>
                        <div class="itembox">
                            <div v-for="item in humen" class="item">
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="plus"
                                    @click="pulstext(item)"> +</el-button>
                                <div :class="['text', chooseList.some(i => i.item === item) ? 'active' : '']"
                                    @click="addtext(item)">
                                    {{ item }}</div>
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="sub"
                                    @click="subtext(item)"> -</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="服饰"><template #label>
                            <span style="color: white;">服饰</span>
                        </template>
                        <el-divider content-position="left"><span class="subtitle">服饰</span></el-divider>
                        <div class="itembox">
                            <div v-for="item in cloth" class="item">
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="plus"
                                    @click="pulstext(item)"> +</el-button>
                                <div :class="['text', chooseList.some(i => i.item === item) ? 'active' : '']"
                                    @click="addtext(item)">
                                    {{ item }}</div>
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="sub"
                                    @click="subtext(item)"> -</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="视角"><template #label>
                            <span style="color: white;">视角</span>
                        </template>
                        <el-divider content-position="left"><span class="subtitle">视角</span></el-divider>
                        <div class="itembox">
                            <div v-for="item in visual" class="item">
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="plus"
                                    @click="pulstext(item)"> +</el-button>
                                <div :class="['text', chooseList.some(i => i.item === item) ? 'active' : '']"
                                    @click="addtext(item)">
                                    {{ item }}</div>
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="sub"
                                    @click="subtext(item)"> -</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="镜头"><template #label>
                            <span style="color: white;">镜头</span>
                        </template>
                        <el-divider content-position="left"><span class="subtitle">镜头</span></el-divider>
                        <div class="itembox">
                            <div v-for="item in lens" class="item">
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="plus"
                                    @click="pulstext(item)"> +</el-button>
                                <div :class="['text', chooseList.some(i => i.item === item) ? 'active' : '']"
                                    @click="addtext(item)">
                                    {{ item }}</div>
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="sub"
                                    @click="subtext(item)"> -</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="氛围"><template #label>
                            <span style="color: white;">氛围</span>
                        </template>
                        <el-divider content-position="left"><span class="subtitle">氛围</span></el-divider>
                        <div class="itembox">
                            <div v-for="item in atmosphere" class="item">
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="plus"
                                    @click="pulstext(item)"> +</el-button>
                                <div :class="['text', chooseList.some(i => i.item === item) ? 'active' : '']"
                                    @click="addtext(item)">
                                    {{ item }}</div>
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="sub"
                                    @click="subtext(item)"> -</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="效果"><template #label>
                            <span style="color: white;">效果</span>
                        </template>
                        <el-divider content-position="left"><span class="subtitle">效果</span></el-divider>
                        <div class="itembox">
                            <div v-for="item in effects" class="item">
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="plus"
                                    @click="pulstext(item)"> +</el-button>
                                <div :class="['text', chooseList.some(i => i.item === item) ? 'active' : '']"
                                    @click="addtext(item)">
                                    {{ item }}</div>
                                <el-button v-if="chooseList.some(i => i.item === item)" type="info" class="sub"
                                    @click="subtext(item)"> -</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>

                <div style="margin-left: 10px; display: flex;flex-direction: column;">
                    <span style="color: white; font-size: 15px;">请从左框选择标签：</span>
                    <el-input class="words" type="textarea" :autosize="{ minRows: 9 }" placeholder="请选择标签："
                        v-model="textarea"></el-input>
                    <span style="color: white; font-size: 15px;">这里输入您的自定义标签：</span>
                    <el-input class="words" type="textarea" :autosize="{ minRows: 6 }" placeholder="自定义的标签："
                        v-model="textarea2"></el-input>

                    <span style="margin: 10px; align-self: flex-end;"><el-button
                            @click="dialogFormVisible = false, textarea = ''">取消</el-button>
                        <el-button type="primary" @click="submit(), dialogFormVisible = false">
                            确定
                        </el-button></span>
                </div>
            </div>
            <template #footer>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const dialogFormVisible = ref(false)
const textarea = ref('')
const textarea2 = ref('')
const emit = defineEmits(['gettext'])
const activeName = ref('first')

const light = ref([
    "灯光照射", "明亮", "柔光照明", "瑞光千条", "云隙光（耶稣光）", "生物发光",
    "气氛光", "红蓝双色光", "人物的45度角侧向光", "高对比的侧面光",
    "正面光顺光", "逆光", "斜逆光", "电影体积光", "动态的电影照明",
    "史诗般的照明", "戏剧性的光", "蓝色的阳光照明", "宗教光",
    "深色照明", "电影照明", "工作室照明", "红灯", "霓虹灯", "阳光照明", "柔光",
    "弱光", "美丽的工作室照明", "奇妙的照明", "电影灯", "软灯",
    "林布兰光"
])

const outside = ref([
    "太阳", "落日", "月亮", "满月", "星星", "天空", "流星雨", "宇宙", "大海", "山丘", "草地",
    "海滩", "水中", "海边", "树林", "沙漠", "高原", "悬崖", "峡谷", "绿洲", "竹林", "冰川",
    "浮岛", "火山", "大草原", "瀑布", "溪流", "荒地", "稻田", "麦田", "花田", "花海",
])
const backg = ref([
    "城堡", "城市", "水上乐园", "旋转木马", "摩天轮", "水族馆", "动物园", "保龄球馆", "美术馆",
    "博物馆", "天文馆", "游泳池", "体育场", "寺庙", "巴士车站", "火车站", "喷泉", "游乐场", "市场摊位",
    "电话亭", "铁轨", "机场", "隧道", "在赛博朋克的城市",
])
const effects = ref([
    "写实", "高清", "电影照明", "4K渲染", "OC渲染", "体积照明", "美丽的照明", "戏剧性的照明",
    "OC引擎", "虚幻引擎4K", "8K分辨率", "高质量", "OC4K", "3D渲染", "过度逼真的OC", "超现实", "现实的3D",
    "体积光", "1080p HI分辨率", "8k磨砂", "超细节", "高辛烷值", "8k渲染", "4K高清", "3dOC", "高细节8k",
    "金属4K", "8k 3d", "4K帖子", "8K高细节渲染", "3D概念艺术", "8kOC效果", "OC渲染", "超级质量", "逼真的照明",
    "详细的虚幻引擎", "高细节", "令人惊叹的照明", "8K Ultra HD", "虚幻的辛烷值", "现实的渲染", "超细节", "详细的绘画", "详细的概念艺术", "宏细节",

])

const styles = ref([
    "概念艺术","装饰艺术风格","角色概念艺术","极简主义风格","新艺术","油画","艺术装饰","哑光绘画","逼真的艺术装饰","黑暗背景","吉卜力工作室的风格","黑色背景","新艺术风格","吉卜力艺术","现实风格","吉卜力风格","彼得·莫尔巴赫风格","赛博朋克风格","Beksinski风格","详细的景观","像素艺术","白色背景","过度逼真的概念艺术","Mucha风格","红色背景","环境艺术","克雷格·穆林斯的风格","星球大战风格","克雷格·穆林斯风格","未来派城市","蒸汽朋克风格","金属艺术","复杂的细节","详细的照片","史诗般的绘画","黑暗的灵魂","逼真的绘画",

])
const building = ref([
"室内","窗帘","床","浴室","厕所隔间","宅男房间","自助餐厅","教室","俱乐部","沙龙","酒吧","居酒屋","咖啡馆","面包店","便利店","超市","书店","药店","剧院","电影院","温室","地库","健身房","医务室","实验室","图书馆","工作坊","舞台","法庭",

])
const humen = ref([
"女性","男性","女孩","男孩","正太","萝莉","美少女","美少男","辣妹","大小姐","Q版人物","胖子","伪娘","天使","魔鬼","迷你女孩","非人","雌小鬼","怪物","老人","富豪","乞丐","巨人","侏儒","小丑","奴隶","雪女","酋长","女王","女神","公主","王子","新娘","新郎","肌肉男","偶像","兔女郎","怪物女孩","狐狸女孩","狼女孩","猫女孩","木偶","黏土手办",
])
const cloth = ref([
"不穿袜子","短袜","日式厚底短袜","丝袜","圣诞袜","暖腿袜","荷叶边袜子","丝带边袜子","闪亮袜子","褶边长筒袜","过膝袜","渔网袜","堆堆袜","裤袜","蕾丝裤袜","罗纹裤袜","湿连裤袜","格子裤袜","透视裤袜","连裤袜","撕裂的连裤袜","单腿连裤袜","荷叶边连裤袜","柳丁吊袜带","吊袜带","大腿系带","腿部花边环","包扎腿",
])
const visual = ref([
"广角","全视图","鸟瞰","顶视","移轴效果","卫星视图","仰视","前侧后视图","产品视角","特写镜头","太空视角","第一人称视角","等距视图","从上往下视角","高角度视图","微视图","移轴特效",

])
const lens=ref([
"电影镜头","宽镜头","对焦","完整的镜头","景深","鱼眼镜头","广角镜头","全拍","大远景","远景","中景","超特写","中特写","特写","过肩画面（镜头）","宽松画面","紧缩画面","电影视图",

])
const atmosphere = ref([
"新年","兔年","情人节","元宵节","夏日祭","七夕节","中秋节","万圣节","圣诞节","爆炸","蒸汽","焰火","落地窗","彩色玻璃","染色玻璃","涂鸦墙","马赛克背景","液体背景","魔法环","荧光蘑菇森林","彩色泡泡",
])

const chooseList = ref([])

const open = () => {
    dialogFormVisible.value = true
}

const submit = () => {
    if (textarea2.value == '') {
        textarea.value = textarea.value.substring(0, textarea.value.length - 1)
    }
    emit('gettext', textarea.value + textarea2.value)
    textarea.value = ''
    textarea2.value = ''
    chooseList.value = []

}

const pulstext = (item) => {
    chooseList.value.forEach((i) => {
        if (i.item == item) i.count++
    })
    arrTostr(chooseList.value)
}
const addtext = (item) => {
    let i = chooseList.value.findIndex(i => i.item === item)
    if (i == -1) {
        chooseList.value.push({
            item: item,
            count: 0
        })
        textarea.value = textarea.value + item + '，'
    } else {
        chooseList.value.splice(i, 1)
        arrTostr(chooseList.value)
    }



}
const subtext = (item) => {
    chooseList.value.forEach((i) => {
        if (i.item == item) i.count--
    })
    arrTostr(chooseList.value)
}

const arrTostr = (arr) => {
    textarea.value = ''
    arr.forEach(i => {
        if (i.count === 0) {
            textarea.value += i.item + '，'
        } else {
            let f = ''
            let b = ''
            for (let j = 0; j < Math.abs(i.count); j++) {
                if (i.count > 0) {
                    f += '('
                    b += ')'
                } else {
                    f += '['
                    b += ']'
                }
            }
            textarea.value += f + i.item + b + '，'
        }
    })
}




defineExpose({
    open
})


</script>

<style lang="scss" scoped>
:deep(.el-textarea__inner) {
    background-color: rgb(46, 44, 42);
    box-shadow: 0 0 10px #18191b;
    border-radius: 15px;
    color: white;
}


.subtitle {
    font-size: 18px;
}

.box {
    display: flex;
    height: 460px;


    .el-tabs {
        background-color: #18191b;
        border-radius: 15px;
        padding: 10px;
        --el-bg-color: #18191b;
        --el-text-color-primary: white;
        box-shadow: 0 0 10px #18191b;

    }



    .itembox {
        display: flex;
        flex-wrap: wrap;



        .item {
            margin: 5px;
            display: flex;
            align-items: center;

            .plus,
            .sub {
                height: 28px;
                font-size: 20px;
                margin: 0 5px;
                padding: 0 8px;


            }

            .text {
                padding: 8px;
                background-color: rgb(49, 52, 59);
                box-shadow: 0 0 10px #18191b;
                border-radius: 5px;
                font-weight: 300;
                cursor: pointer;
                transition: all 0.5s;
            }

            .active {
                background-color: rgb(124, 78, 138);
            }
        }

    }


}

.words {
    width: 250px;
    background-color: rgb(46, 44, 42);
    margin: 5px 0;
}
.tool4 {
  div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    .el-tag {
      width: 60px;
      height: 30px;
      max-width: 4.5em;
      white-space: normal;
      word-break: break-all;
    }
  }
}
</style>
